<!--  -->
<template>
  <view class="app-page safe-area">
    <view v-for="(item, index) in records" :key="index" class="card">
      <view class="orderId"> 订单编号:{{ item.orderCode }} </view>
      <view :class="item.status === 2 ? 'orderStateNo' : 'orderState'">
        {{
          item.status === 1 ? "已使用" : item.status === 2 ? "已过期" : "已支付"
        }}
      </view>
      <view class="orderItem">
        <view class="orderItem-label"> 已使用: </view>
        {{ item.usedTimes }}份
      </view>
      <view class="orderItem red">
        <view class="orderItem-label"> 剩余可用: </view>
        {{ item.remainingTimes }}份
      </view>
      <view class="orderItem">
        <view class="orderItem-label"> 失效时间: </view>
        {{ item.expiryDateTime }}
      </view>
      <view class="orderFoot">
        <text>￥</text>
        {{ item.payPrice }}
      </view>
    </view>
    <view v-if="noMore" class="noMore"> 到底了！ </view>
    <view v-if="!noMore && records.length === 0">
      <empty-data />
    </view>
  </view>
</template>
<script>
import { apiFlowOrderPage } from "@/api/common.js";
import { parseTime, regFenToYuan } from "@/utils/common";
import code2Enum from "@/utils/code2Enum";
export default {
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      totalPage: 0,
      records: [],
      noMore: false,
    };
  },
  onReady() {
    uni.hideShareMenu();
    this.getData();
  },
  onPullDownRefresh() {
    this.onRefresh();
  },

  // 页面被拉到底部
  onReachBottom() {
    const { totalPage, pageNo } = this;
    if (pageNo < totalPage) {
      this.pageNo = pageNo + 1;
      this.getData();
    } else {
      this.noMore = true;
    }
  },
  onRefresh() {
    this.refresh();
  },
  methods: {
    getData() {
      const { pageNo, pageSize } = this;
      const apply = {
        pageNo,
        pageSize,
      };
      apiFlowOrderPage(apply)
        .then((res) => {
          uni.hideLoading();
          uni.stopPullDownRefresh();
          if (res.code == 200) {
            const data = res.data.records.map((item) => {
              item = {
                ...item,
                status: code2Enum.signPackageStatusEnum(item.status),
              };
              item.expiryDateTime = parseTime(
                item.expiryDateTime,
                "{y}年{m}月{d}日"
              );
              item.payPrice = regFenToYuan(item.payPrice);
              return item;
            });
            this.records = this.records.concat(...data);
            this.totalPage = res.data.pages;
            this.noMore =
              res.data.records.length && res.data.records.length < 10;
          }
        })
        .catch((err) => {
          uni.hideLoading();
          uni.stopPullDownRefresh();
        });
    },
    refresh() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.totalPage = 0;
      this.records = [];
      this.noMore = false;
      this.$nextTick(() => {
        uni.showLoading();
        this.getData();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.app-page {
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  position: relative;
  padding-top: 208rpx;
  box-sizing: border-box;
}

.app-page::before {
  width: 100vw;
  height: 10rpx;
  content: "";
  /* background-color: #fff; */
  background: #fff;
  position: absolute;
  border-radius: 8rpx 8rpx 0 0;
  left: 0;
  top: 208rpx;
  z-index: 2;
}

.app-page::after {
  width: 100vw;
  height: 218rpx;
  content: "";
  /* background-color: #fff; */
  background: linear-gradient(to bottom, #94cefd, #add9fe);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.card {
  width: 702rpx;
  height: 332rpx;
  background: linear-gradient(180deg, #f2f9ff 0%, #fbfbfb 100%);
  box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(132, 121, 121, 0.5);
  border-radius: 16rpx;
  margin: 24rpx;
  padding: 24rpx 24rpx 0;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.orderId {
  height: 42rpx;
  font-size: 30rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 42rpx;
  margin-bottom: 24rpx;
}

.orderState {
  height: 42rpx;
  font-size: 30rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  color: #1677ff;
  line-height: 42rpx;
  position: absolute;
  right: 24rpx;
  top: 24rpx;
}

.orderStateNo {
  height: 42rpx;
  font-size: 30rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  color: #c9c8c8;
  line-height: 42rpx;
  position: absolute;
  right: 24rpx;
  top: 24rpx;
}

.orderItem {
  height: 37rpx;
  font-size: 26rpx;
  font-family: PingFangSC, PingFang SC;
  color: #333333;
  line-height: 37rpx;
  margin-bottom: 24rpx;
  display: flex;
  align-items: center;
}

.red {
  color: #ff3141;
}

.orderItem-label {
  width: 130rpx;
  height: 37rpx;
  font-size: 26rpx;
  font-family: PingFangSC, PingFang SC;
  color: #999999;
  line-height: 37rpx;
}

.orderFoot {
  width: 702rpx;
  font-size: 26rpx;
  font-family: PingFangSC, PingFang SC;
  background-color: #f5f8fa;
  color: #000000;
  line-height: 37rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 11rpx 0;
  box-sizing: border-box;
  font-weight: bold;
  margin-left: -24rpx;
  padding-right: 24rpx;
}

.orderFoot text {
  display: inline-block;
  width: 26rpx;
  height: 26rpx;
  background: #000000;
  color: #fff;
  font-size: 20rpx;
  border-radius: 50%;
  text-align: center;
  line-height: 26rpx;
  margin-right: 5rpx;
}
</style>
